<template>
    <!-- 欢迎页 -->
    <template v-if="emptyType === 'welcome'">
        <div class="empty-box bg-white">
            <p class="text-t-secondary text-42">Welcome</p>
            <p class="text-30 mt-16">欢迎登录</p>
            <div><el-image :src="useImage('common', 'init-bg.png')"/></div>
        </div>
    </template>
    <!-- 网络超时页 -->
    <template v-if="emptyType === 'networkTimeout'">
        <div class="empty-box w-full text-t-secondary flex-col-center-box card-style">
            <div class="network-en text-42">NetWork Error....</div>
            <el-button
                class="network-cn text-16 mt-12"
                type="primary"
                round
                @click="refreshPage"
            >重新加载</el-button>
            <div class="init-icon">
                <el-image :src="useImage('common', '404.svg')"/>
            </div>
        </div>
    </template>
    <!-- 其他缺省页 -->
    <template v-if="emptyType === 'list'">
        <div class="empty-box page-empty bg-white rounded-14 common-shadow">
            <el-empty :image-size="230" description="暂无数据 ~" />
        </div>
    </template>
</template>

<script setup lang="ts">
import { useImage, GlobalMitt } from '@utils/methods'
import { nextTick } from 'vue'

withDefaults(defineProps<{
    // 缺省页类型
    emptyType: 'welcome' | 'list' | 'networkTimeout',
}>(), {
    emptyType: 'list'
})

// 重新加载页面
const refreshPage = async () => {
    GlobalMitt.emit('networkTimeout', true)
    await nextTick()
    GlobalMitt.emit('networkTimeout', false)
}
</script>

<style lang="less" scoped>
.empty-box {
    @apply flex flex-col justify-center items-center;
    height: 100%;
    min-height: 800px;

    div {
        width: 700px;
    }
}

.page-empty{
    height: calc(100% - 64px);
}

.init-icon{
    margin-top: -90px;
    width: 700px;
}

.network-en{
    margin-left: 440px;
}

.network-cn{
    margin-left: 70px;
    z-index: 10;
}
</style>
